<template lang="">
  <div style="display: flex; justify-content: center;">
    <div style="width: 300px;">
      <img
      style="width: 300px;height: 300px;"
        :src="form.image"
      />
      <h2><span style="color: red;">名字：</span>{{form.name}}</h2>
      <p> <span style="color: red;">介绍：</span>{{form.desc}}</p>
      <a-button-group type="primary" status="warning">
        <a-button type="primary" status="danger" shape="round" @click="add(form.id)">先放箱子里面</a-button>
        <a-button type="primary" status="success" shape="round"@click="$router.push('/car')" >打开箱子看看</a-button>
      </a-button-group>
      <div style="margin-top: 20px;display: flex;justify-content: space-between;">
        <a-button-group type="primary" status="warning">
        <a-button> <template #icon><icon-heart-fill /></template> </a-button>
        <a-button> <template #icon><icon-star-fill /></template> </a-button>
        <a-button> <template #icon><icon-thumb-up-fill /></template> </a-button>
      </a-button-group>
      </div>
      
    </div>
   
  </div>
</template>
<script>
 import {useRouter,useRoute} from "vue-router";
 import{getMedicineAPIId,addShopCartAPI} from "../../api/api";
 import{imgs} from '../../tools/request'

export default {
  data(){
    return{
     form:[],
     medicine:"",
     amount:1,
     price:1
    }
  },
  methods:{
    add(id){
      addShopCartAPI({
        medicine:id,
        amount:this.amount,
        price:this.price
      }).then(res=>{
        console.log(res);
        // if(res.success){
        //   this.$message.success(res.errorMessage)
        // }else{
        //   this.$message.error(res.errorMessage)
        // }
      })
    }
  },
  mounted() {
    let route=useRoute();
    if(route.query.id){
      console.log(route.query.id);
      getMedicineAPIId(route.query.id).then(res=>{
        console.log(res);
        console.log(res.data.image);
        res.data.image=imgs(res.data.image)
        this.form=res.data
        console.log(this.form);
      })
    }
    this.medicine=route.query.id
  },
}
</script>
<style lang="">
  
</style>